import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class StackDemoHome extends StatelessWidget {
  const StackDemoHome({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.grey,
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Center(
          child: Column(
            children: [
              buildStack1(),
              SizedBox(
                height: 15,
              ),
              SizedBox(
                width: 250,
                height: 250,
                child: Stack(
                  children: [
                    Container(
                      width: 250,
                      height: 250,
                      color: Colors.white,
                    ),
                    Container(
                      padding: EdgeInsets.all(5),
                      alignment: Alignment.bottomCenter,
                      decoration: BoxDecoration(
                          gradient: LinearGradient(
                              begin: Alignment.topCenter,
                              end: Alignment.bottomCenter,
                              colors: [
                            Colors.black.withAlpha(0),
                            Colors.black12,
                            Colors.black45
                          ])),
                      child: const Text(
                        "Foreground Text",
                        style: TextStyle(color: Colors.white, fontSize: 20.0),
                      ),
                    )
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }

  Stack buildStack1() {
    return Stack(
      children: [
        Container(
          width: 200,
          height: 200,
          color: Colors.purple,
        ),
        Positioned(
            left: 20,
            top: 20,
            child: Icon(
              Icons.favorite,
              color: Colors.white,
            )),
        Positioned(
          right: 20,
          bottom: 20,
          child: Text(
            "星星点灯",
            style: TextStyle(color: Colors.white),
          ),
        )
      ],
    );
  }
}
